<template>
  <div>
    <!-- 底部服务 -->
    <section>
      <div class="footer-serve">
        <div class="container">
          <ul>
            <li>
              <div class="serve-top">客服服务</div>
              <div class="serve-bottom">
                <div class="icon-box">
                  <div class="icon el-icon-headset"></div>
                  <span>在线客服</span>
                </div>
                <div class="icon-box">
                  <div class="icon el-icon-coffee-cup"></div>
                  <span>问题反馈</span>
                </div>
              </div>
            </li>
            <li>
              <div class="serve-top">关注我们</div>
              <div class="serve-bottom">
                <div class="icon-box">
                  <div class="icon el-icon-chat-dot-round"></div>
                  <span>公众号</span>
                </div>
                <div class="icon-box">
                  <div class="icon el-icon-collection"></div>
                  <span>微博</span>
                </div>
              </div>
            </li>
            <li>
              <div class="serve-top">下载app</div>
              <div class="serve-bottom">
                <div class="icon-box">
                  <div class="icon el-icon-coordinate"></div>
                  <span>在线客服</span>
                </div>
                <div class="icon-box" style="border: none; padding: 0">
                  <div class="download">
                    扫描二维码
                    <p>立马下载APP</p>
                  </div>
                  <button>下载页面</button>
                </div>
              </div>
            </li>
            <li>
              <div class="serve-top">服务热线</div>
              <div class="serve-phone">
                <h1>400-0000-000</h1>
                <h3>周一至周日 8:00-18:00</h3>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.container {
  width: 1240px;
  margin: 0 auto;
}
.footer-serve {
  height: 290px;
  background-color: #ffffff;
}

.footer-serve .container {
  padding: 60px 0 40px 0;
}

.footer-serve ul {
  display: flex;
}

.footer-serve ul li {
  flex: 1;
  width: 269px;
  height: 190px;
  text-align: center;
}

.footer-serve ul li:not(:last-child) {
  border-right: 1px solid #eee;
}

.footer-serve ul li .serve-top {
  color: gray;
  font-size: 18px;
  margin-bottom: 30px;
}

.footer-serve ul li .serve-bottom {
  display: flex;
  justify-content: space-evenly;
  padding: 0 50px;
}

.serve-bottom .icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 92px;
  height: 92px;
  font-size: 14px;
  color: gray;
  padding: 0 0 8px 0;
  border: 1px solid #eee;
}
.serve-bottom .icon-box span {
  margin-top: -15px;
}
.serve-bottom .icon-box .icon {
  width: 56px;
  height: 56px;
  margin: 15px 0 0 0;
  font-size: 30px;
}
.serve-bottom .icon-box .download {
  margin-top: 10px;
}

.serve-bottom .icon-box button {
  background-color: #27ba9b;
  border: none;
  color: #ffffff;
  width: 100px;
  height: 30px;
  margin-top: 4px;
}

.serve-phone {
  padding-top: 20px;
  color: gray;
}
</style>